목차
상태 관리(State Management)
Recoil에 대하여 말하기 전에 먼저 상태 관리에 대하여 정의하고 들어가도록 하자.
- 상태 관리에서 상태(state)란 애플리케이션의 동작 방식을 설명하는 모든 데이터를 의미한다.
- 상태는 외부에서 주입되는 동적인 데이터(서버로부터 받은 데이터) 와 애플리케이션 UI 상태(IsOpen, IsClose 등)의 두 가지로 나눌 수 있다.
- React는 상태를 기반으로 View를 제어하는 라이브러리 이다.
React 자체의 상태 관리
React 자체적으로 내장된 상태 관리 기능은 단순하고 호환성을 유지하기가 좋다. 하지만 아래와 같은 한계사항을 가진다.
- 컴포넌트의 상태를 공유하기 위해서는 상태를 공통된 상위 요소까지 끌어올려야 한다. 심한 경우 애플리케이션의 최상단 까지 올라가야 하는 문제가 발생 할 수 있다.(prop driling).
- Context API는 동적인 데이터를 저장하는데 적합하지 않다. 또한 최적화 관점에서 성능적 한계가 명확하다.
- Context API는 컴포넌트의 로컬 상태를 공통된 상위 요소로 끌어 올린 후 하단에 흘려보내는 구조를 가지고 있다는 점에서 상태 관리보다는 의존성 주입에 가깝다고 생각한다. 위에서의 한계점 때문에 ‘상태가 만들어지는 곳’ 과 ‘상태를 사용하는 곳’ 의 코드 분할이 어렵게 된다는 문제점이 존재한다.
위의 문제점을 해결하기 위해 Redux, MobX, Recoil, Jotai, Zustand등의 ‘전역 상태관리’ 라이브러리들이 등장했다.
Recoil?
Recoil은 React를 위한 ‘상태 관리’ 라이브러리이다. 또한 React를 만든 페이스북의 팀이 만들었고, React의 Hook과 매우 유사한 용법을 가지고 있다.
Recoil은 전역 상태를 ‘atom’ 이라는 단위로 관리한다. 또한 React 컴포넌트는 atom을 구독하고, 업데이트 할 수 있다. Atom이 업데이트 되면, 구독된 각각의 컴포넌트들은 새로운 상태를 반영하여 다시 렌더링 프로세스를 수행한다.
atom의 사용법
Atom은 아래와 같이 생성 할 수 있다.
import { atom } from 'recoil'
export const themeState = atom({
key: 'themeState',
default: 'dark',
})간단하지 않나?
컴포넌트에서 atom을 읽거나 쓰려면 ==useRecoilState== 라는 훅을 사용하면 된다. ==useState==훅과 용법이 비슷하게 사용가능하다.
import { useRecoilState } from 'recoil'
import { themeState } from '../atoms'
function ThemeSwitch() {
const [theme, setTheme] = useRecoilState(themeState)
return (
<button
onClick={() =>
setTheme(theme => (theme === 'dark' ? 'light' : 'dark'))
}
>
Click to Theme Switch
</button>
)
}